<template>
  <a-modal
    title="新增设备"
    :width="500"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          style="display: none;"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input v-decorator="['id']" />
        </a-form-item>
        <a-form-item
          label="设备名称"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input
            placeholder="请输入设备名称"
            v-decorator="['name', { rules: [{ required: true, message: '请输入设备名称！' }] }]"
          />
        </a-form-item>
        <a-form-item
          label="设备编号"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input
            placeholder="请输入设备编号"
            v-decorator="['number', { rules: [{ required: true, message: '请输入设备编号！' }] }]"
          />
        </a-form-item>

        <a-form-item
          label="设备IP地址"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input
            placeholder="请输入设备IP地址"
            v-decorator="['ipAddress', { rules: [{ required: true, message: '请输入设备IP地址！' }] }]"
          />
        </a-form-item>

        <a-form-item
          label="班级"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-select
            allowClear
            v-decorator="['classesId', { rules: [{ required: false, message: '请选择班级！' }] }]"
            placeholder="请选择班级"
          >
            <a-select-option
              v-for="item in classList"
              :key="item.id"
              :value="item.id"
            >{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="设备类型"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-select
            allowClear
            v-decorator="['enumDeviceType', { rules: [{ required: true, message: '请选择类型！' }] }]"
            placeholder="请选择类型！"
          >
            <a-select-option
              v-for="item in enumDeviceTypelist"
              :key="item.value"
              :value="item.value"
            >{{ item.lable }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="设备序列号"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input
            placeholder="请输入设备序列号"
            v-decorator="['deviceKey', { rules: [{ required: false, message: '请输入设备序列号！' }] }]"
          />
        </a-form-item>
        <a-form-item
          label="设备密码"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input
            placeholder="请输入设备密码"
            v-decorator="['deviceSecret', { rules: [{ required: false, message: '请输入设备密码！' }] }]"
          />
        </a-form-item>
        <a-form-item
          label="适用人群"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-select
            allowClear
            mode="multiple"
            v-decorator="['applicablePopulation', { rules: [{ required: false, message: '请选择适用人群！' }] }]"
            placeholder="请选择适用人群！"
          >
            <a-select-option
              v-for="item in usePeaples"
              :key="item.value"
              :value="item.value"
            >{{ item.lable }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          v-if="getIsshowType()"
          label="使用方式"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-select
            allowClear
            mode="multiple"
            v-decorator="['applicablePopulation1', { rules: [{ required: false, message: '请选择使用方式！' }] }]"
            placeholder="请选择使用方式"
          >
            <a-select-option
              v-for="item in useType"
              :key="item.value"
              :value="item.value"
            >{{ item.lable }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>
  
  <script>
import { sysPosList } from '@/api/modular/garden/classManage'
import { deviceEdit } from '@/api/modular/garden/sound'
export default {
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      classList: [],
      enumDeviceTypelist: [
        {lable: '音响', value: 1},
        {lable: '考勤', value: 2},
        {lable: '晨检', value: 3},
      ],
      usePeaples: [
        {lable: '学生', value: 1},
        {lable: '老师', value: 2},
        {lable: '家长', value: 3},
      ],
      useType: [
        {lable: '人脸', value: 1},
        {lable: 'IC卡', value: 2},
      ]
    }
  },
  created() {
    this.getClass()
  },
  methods: {
    // 初始化方法
    edit(record) {
      console.log(record)
      this.visible = true
      this.$nextTick(() => {
          this.form.setFieldsValue(
            {
              id: record.id,
              name: record.name,
              number:record.number,
              ipAddress: record.ipAddress,
              classesId: record.classesId,
              enumDeviceType: record.deviceType,
              deviceKey: record.deviceKey,
              deviceSecret: record.deviceSecret,
              applicablePopulation: record.applicablePopulation
            }
          )
          let arr = []
          if(record.isFace){
            arr.push(1)
          }
          if(record.isCard){
            arr.push(2)
          }
          this.form.getFieldDecorator('applicablePopulation1', { initialValue: arr })
          console.log(this.form.getFieldValue('applicablePopulation1'))
          
        })
    },
    
    getIsshowType(){
      let arr = this.form.getFieldValue('applicablePopulation')
      if(arr && arr.length > 0){
        if(arr.indexOf(3) > -1){
          console.log(arr)
          return true
        }else{
          return false
        }
      }else{
        return false
      }
    },
    getClass() {
      let obj = {
        isArchived: false,
      }
      sysPosList(obj).then((res) => {
        console.log(res.data)
        this.classList = res.data
      })
    },
    handleSubmit() {
      const {
        form: { validateFields },
      } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          let arr = this.form.getFieldValue('applicablePopulation1')
            if(arr&&arr.indexOf(1) > -1){
              values.isface = true
            }
            if(arr&&arr.indexOf(2) > -1){
              values.iscard = true
            }
          deviceEdit(values)
            .then((res) => {
              if (res.success) {
                this.$message.success('修改成功')
                this.visible = false
                this.confirmLoading = false
                this.$emit('ok', values)
                this.form.resetFields()
              } else {
                this.$message.error('修改失败：' + res.message)
              }
            })
            .finally((res) => {
              this.confirmLoading = false
            })
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel() {
      this.form.resetFields()
      this.visible = false
    },
  },
}
</script>
  
  <style>
</style>